<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
  <title>缩放加自由滑动 - JRoll</title>
  <link rel="stylesheet" href="../css/demo.css">
  <script src="../download/jroll.min.js"></script>
</head>
<body>
  <div id="scrollfree">
    <header id="header">缩放加自由滑动</header>
    <div id="wrapper">
      <div id="scroller">
        <img src="../images/scrollfree.jpg" width="100%" height="auto" />
      </div>
    </div>
    <footer id="footer">scrollFree为true时可斜向滑动</footer>
  </div>
  <script>
    var jroll = new JRoll("#wrapper", {zoom:true, scrollFree:true});

    var img = document.querySelector("#scroller img");

    if (img) {
      //图片加载完成后会改变scroller的高度，因此要refresh一下
      img.onload = function() {
        jroll.refresh();
      }
    }
  </script>
</body>
</html>